<template>
	<view class="container">
		<view class="main">
			<view class="header">
				<view class="header-top">
					<view class="header-top-icon">
						<image :src="info.icon" mode="aspectFill"></image>
					</view>
					<view class="header-top-title">
						{{ info.name }}
					</view>
				</view>
				<view class="header-body">
					<view class="header-body-item">
						<view>{{ info.money }}万</view>
						<view>最高额度</view>
					</view>
					<view class="header-body-item">
						<view>{{ info.interest }}%</view>
						<view>年化利率</view>
					</view>
				</view>
			</view>
			<view class="form">
				<view class="form-item" v-if="info.ask_type == 1">
					<view class="form-item-icon">
						<image src="@/static/icon7.png" mode="aspectFill"></image>
					</view>
					<input class="form-item-input" placeholder="请输入申请企业名" v-model="form.business_name" />
				</view>
				<view class="form-item">
					<view class="form-item-icon">
						<image src="@/static/icon1.png" mode="aspectFill"></image>
					</view>
					<input class="form-item-input" placeholder="请输入申请人姓名" v-model="form.username" :maxlength="6" />
				</view>
				<view class="form-item">
					<view class="form-item-icon">
						<image src="@/static/icon2.png" mode="aspectFill"></image>
					</view>
					<input class="form-item-input" placeholder="请输入申请人身份证号" v-model="form.card" type="idcard" />
				</view>
				<view class="form-item">
					<view class="form-item-icon">
						<image src="@/static/icon3.png" mode="aspectFill"></image>
					</view>
					<view v-if="info.ask_type == 1">法人</view>
					<view v-if="info.ask_type == 2">个人</view>
				</view>
				<view class="form-item">
					<view class="form-item-icon">
						<image src="@/static/icon4.png" mode="aspectFill"></image>
					</view>
					<input class="form-item-input" placeholder="请输入申请人手机号" v-model="form.mobile" type="tel" />
				</view>
				<view class="form-item">
					<view class="form-item-icon">
						<image src="@/static/icon5.png" mode="aspectFill"></image>
					</view>
					<input class="form-item-input" placeholder="请输入短信验证码" v-model="form.verification" type="number" />
					<text v-if="!start" @click="handleCount">获取验证码</text>
					<view v-if="start" class="count" style="display:flex;flex:1;justify-content:end;">
						<uni-countdown :start="start" :show-day="false" :font-size="14" color="#FE4369"
							:showHour="false" :showMinute="false" :second="60" @timeup="timeup"></uni-countdown>
						<view>秒后重试</view>
					</view>
				</view>
				<view class="form-item" @click="handleCity">
					<view class="form-item-icon">
						<image src="@/static/icon6.png" mode="aspectFill"></image>
					</view>
					<view style="flex: 1;">{{ form.address || '请选择地区'}}</view>
				</view>
				<view class="form-xieyi">
					<xieyi v-model:isCheck="isCheck">
						<text>《用户协议》</text>
					</xieyi>
				</view>
			</view>
		</view>
		<view class="footer">
			<view style="padding: 26rpx;">
				<view class="footer-btn" @click="handleSubmit">
					提交申请
				</view>
			</view>
		</view>
		<cityModal ref="cityModalRef" @checkSuccess="checkSuccess" />
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		watchEffect,
		onMounted
	} from 'vue'
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getHttpApi,
		postHttpApi
	} from '@/api/api.js'
	import xieyi from "@/components/xieyi/index.vue"
	import cityModal from "@/components/cityModal/index.vue"
	const id = ref(null)
	const info = ref({})
	const isCheck = ref(false)
	const form = ref({})
	const start = ref(false)
	onLoad(async (options) => {
		id.value = options.id
		await getDetails()
	})
	// 获取详情
	const getDetails = async () => {
		try {
			let res = await getHttpApi({
				route: 'Newfinance.productDetail',
				type: 3,
				id: id.value
			});
			info.value = res.data
		} catch (e) {
			//TODO handle the exception
		}
	}

	const cityModalRef = ref(null)
	const handleCity = () => {
		cityModalRef.value.open()
	}
	const handleSubmit = async () => {
		console.log(isCheck.value)
		if (!isCheck.value) {
			uni.showToast({
				title: '请先阅读并勾选用户协议',
				icon: 'none'
			})
			return
		}
		try {
			let res = await postHttpApi({
				...form.value
			},`&route=Newfinance.applyForProduct&type=3&id=${id.value}`);
		} catch (e) {
			//TODO handle the exception
		}
	}
	const checkSuccess = (val) => {
		form.value.address = val
	}
	const timeup = () => {
		start.value = false
	}
	const handleCount = ()=> {
		if (!form.value.mobile) {
			uni.showToast({
				title: '请先输入手机号',
				icon: 'none'
			})
			return
		}
		start.value = true
		getHttpApi({
			route: 'member.register.sendCodeV2',
			sms_type: '2',
			reset: '1',
			type: '5',
			scope: 'pass',
			mobile: form.value.mobile
		}).then(res => {
			uni.showToast({
				title:'验证码发送成功',
				icon:'none'
			})
		})
	}
</script>

<style lang="scss" scoped>
	label {
		display: flex;
		align-items: center;
		padding: 22rpx 0;
	}

	.form {
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 22rpx 20rpx;

		&-item {
			display: flex;
			align-items: center;
			padding: 26rpx 0;
			border-bottom: 2rpx solid #F0F0F0;

			&-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 22rpx;
				
			}

			&>input {
				flex: 1;
			}
		}

		&-xieyi {
			font-weight: 400;
			font-size: 24rpx;
			color: #5E5E5E;
			line-height: 40rpx;
			padding: 26rpx 0;
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #FFFFFF;

		&-btn {
			background: #1A64FF;
			border-radius: 10rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			padding: 24rpx;
		}
	}

	image {
		width: 100%;
		height: 100%;
	}

	.main {
		padding: 26rpx;
	}

	.header {
		padding: 30rpx 22rpx 0;
		background: #1A64FF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;

		&-top {
			display: flex;
			padding-bottom: 24rpx;

			&-icon {
				width: 48rpx;
				height: 48rpx;
				border-radius: 10rpx;
				margin-right: 18rpx;
				overflow: hidden;
			}

			&-title {
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}

		&-body {
			display: flex;
			padding: 36rpx 0;

			&-item {
				width: 50%;
				text-align: center;

				&>view:nth-child(1) {
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 28rpx;
					margin-bottom: 12rpx;
				}

				&>view:nth-child(2) {
					font-weight: 400;
					font-size: 24rpx;
					color: #98A6F6;
					line-height: 28rpx;
				}
			}
		}
	}
</style>